<template>
	<view class="login pages">
		<view class="logo">
			<image :src="logo" mode=""></image>
		</view>
		<view class="body">
			<view class="form">
				<view class="form_title">{{$t('enroll.enroll')}}</view>
				<view class="form_input">
					<view style="font-weight: bold;margin-right: 30rpx;"
						@click="to(`/pages/shop/login/code?code=${code}`)">
						+{{code}}
						<uni-icons type="bottom" size="10" color="grey" style="margin-left: 10rpx;"></uni-icons>
					</view>
					<input type="number" :placeholder="$t('login.other.Mobile')" v-model="form.phone">
					<uni-icons type="clear" color="grey" v-show="!!form.phone" @click="form.phone=''"></uni-icons>
				</view>
				<view class="form_input">
					<view style="display: flex;margin-right: 20rpx;">
						<input type="text" :placeholder="$t('enroll.code')" v-model="form.code">
						<uni-icons type="clear" color="grey" v-show="!!form.code" @click="form.code=''"></uni-icons>
					</view>
					<view @click="openPrivacy" v-if="countdownShow"
						style="background-color: #00C2C2;flex-shrink: 0;padding: 10rpx 20rpx;color: #fff;">
						{{$t('enroll.getCode')}}
					</view>
					<view v-else style="background-color: #00C2C2;flex-shrink: 0;padding: 10rpx 20rpx;color: #fff;">
						{{$t('enroll.newGet')}}({{num}})
					</view>
				</view>
				<view class="form_input">
					<input type="password" :placeholder="$t('enroll.pass')" v-model="form.password">
					<uni-icons type="clear" color="grey" v-show="!!form.password" @click="form.password=''"></uni-icons>
				</view>
				<view class="form_input">
					<input type="text" :placeholder="$t('enroll.nick')" v-model="form.nick">
					<uni-icons type="clear" color="grey" v-show="!!form.nick" @click="form.nick=''"></uni-icons>
				</view>
			</view>
			<view class="btn">
				<view @click="login">{{$t('enroll.zhu')}}</view>
			</view>
			<view class="documentation">
				<view :class="checkShow?'check active':'check'" @click="checkShow=!checkShow">
					<uni-icons type="checkmarkempty" color="#fff" size="8"></uni-icons>
				</view>
				<view style="margin-left: 10rpx;color: gray;">{{$t('login.other.Read')}}</view>
				<view @click="to(`/pages/shop/login/policy?type=${0}`)">《{{$t('login.other.User')}}》</view>
				<view @click="to(`/pages/shop/login/policy?type=${1}`)">《{{$t('login.other.Privacy')}}》</view>
				<view @click="to(`/pages/shop/login/policy?type=${2}`)">《{{$t('login.other.Information')}}》</view>
			</view>
		</view>
		<!-- 服务协议 -->
		<uni-popup ref="privacy">
			<view class="privacy-content">
				<uni-icons type="closeempty" color="grey" class="privacy-icon" @click="closePrivacy(false)"></uni-icons>
				<view class="privacy-title">{{$t('login.other.Service')}}</view>
				<view class="privacy-text">
					{{$t('login.other.In')}}
					<text @click="to(`/pages/shop/login/policy?type=${0}`)">《{{$t('login.other.User')}}》</text>
					<text @click="to(`/pages/shop/login/policy?type=${1}`)">《{{$t('login.other.Privacy')}}》</text>
					<text @click="to(`/pages/shop/login/policy?type=${2}`)">《{{$t('login.other.Information')}}》</text>
					{{$t('login.other.Phone')}}
				</view>
				<view class="privacy-btn" @click="closePrivacy(true)">{{$t('login.other.Agree')}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sendSms,
		getSetting,
		indexReg
	} from '@/api/api.js'
	export default {
		data() {
			return {
				logo: '',
				code: 52,
				num: 60,
				countdownShow: true,
				checkShow: false,
				eye: true,
				form: {}
			};
		},
		onShow() {
			this.checkShow = false
			this.getSetting()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			to(url) {
				uni.navigateTo({
					url: url
				})
			},
			getSetting() {
				getSetting().then(res => this.logo = res.data.data.logo)
			},
			openPrivacy() {
				if (this.checkShow) {
					sendSms({
						phone: this.form.phone,
						phone_ex: this.code,
						event: 'register'
					}).then(res => {
						uni.showToast({
							title: this.$t('login.captcha.Verify'),
							icon: "none"
						})
						this.countdownShow = false
						this.getNum()
						this.form.code = res.data.data.code
					})
				} else {
					this.$refs.privacy.open('bottom')
				}
			},
			closePrivacy(blo) {
				if (blo) {
					this.checkShow = true
					sendSms({
						phone: this.form.phone,
						phone_ex: this.code,
						event: 'register'
					}).then(res => {
						uni.showToast({
							title: this.$t('login.captcha.Verify'),
							icon: "none"
						})
						this.countdownShow = false
						this.getNum()
						this.form.code = res.data.data.code
					})
				} else {
					this.checkShow = false
				}
				this.$refs.privacy.close()
			},
			// 倒计时
			getNum() {
				let time = setInterval(() => {
					this.num--
					if (this.num == -1) {
						clearTimeout(time);
						this.countdownShow = true
						this.num = 60
					}
				}, 1000)
			},
			login() {
				indexReg({
					phone_ex: this.code,
					phone: this.form.phone,
					password: this.form.password,
					code: this.form.code,
					nick_name: this.form.nick
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					uni.setStorageSync('token', res.data.data.token)
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/shop/index/index?frist=1"
						})
					}, 600)
				})
			},
			openIssue() {
				this.$refs.issue.open('bottom')
			},
			closeIssue() {
				this.$refs.issue.close()
			}
		}
	}
</script>

<style lang="scss">
	/deep/.uni-input-placeholder {
		font-size: 28rpx;
		font-weight: normal;
	}

	.login {
		padding: 10px;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		margin: 100rpx auto 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.body {
		width: 90%;
		margin: 0 auto;

		.form {
			margin: 60rpx auto 60rpx;

			.form_title {
				font-size: 46rpx;
			}

			.form_text {
				color: gray;
				margin: 20rpx 0 30rpx;
			}

			.form_input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ddd;
				height: 80rpx;
				margin-top: 30rpx;

				input {
					flex-grow: 1;
					margin-left: 10rpx;
					font-weight: bold;
					font-size: 40rpx;
				}
			}
		}

		.btn {
			&>view {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 6rpx;
				margin-bottom: 20rpx;
			}

			&>view:first-child {
				background-color: #00C2C2;
				color: #fff;
			}
		}

		.documentation {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			font-size: 26rpx;
			position: fixed;
			bottom: 10rpx;

			.check {
				width: 25rpx;
				height: 25rpx;
				border: 1rpx solid #ddd;
				border-radius: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active {
				border: none;
				background-color: #00C2C2;
			}
		}
	}

	.privacy-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
		position: relative;

		.privacy-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.privacy-title {
			font-size: 36rpx;
			text-align: center;
			font-weight: bold;
		}

		.privacy-text {
			margin: 20rpx 0 40rpx;
			color: gray;

			&>text {
				color: #000;
			}
		}

		.privacy-btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			background-color: #00C2C2;
			color: #fff;
		}
	}

	.issue-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		font-size: 26rpx;

		.issue-title {
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #F4F3F8;
			color: #ccc;
		}

		.issue-caozuo {
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.issue-text {
				font-size: 38rpx;
			}
		}

		.issue-pos {
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1px solid #F4F3F8;
			font-size: 34rpx;
		}

		.issue-btn {
			height: 100rpx;
			line-height: 80rpx;
			border-top: 20rpx solid #F4F3F8;
		}
	}
</style>